<!--  -->
<template>
  <div class="computed-recharge">
    <c-title :hide="false" :text="`${form.set && form.set.name ? form.set.name : '算力'}充值`"></c-title>
    <div class="top-backgroud"></div>
    <div class="content-box">
      <div class="content-recharge">
        <div class="content-title">当前{{form.set && form.set.name ? form.set.name : "算力"}}</div>
        <div class="content-num">{{form.current_comput}}</div>
        <div class="recharge-row">
          <span class="recharge-tip" v-if="computed_value == ''">请输入充值数量</span>
          <span v-else>{{computed_value}}</span>
        </div>
        <div class="content-text-color">最低充值{{form.set ? form.set.min_amount : ""}}{{form.set && form.set.name ? form.set.name : "算力"}};</div>
        <div class="content-text-color">1{{form.set && form.set.name ? form.set.name : "算力"}}等于{{form.set ? form.set.comput_change : ""}}元!</div>
        <div class="recharge-list" v-if="form.set && form.set.recharge_ladder.length">
          <div @click="clickComputed(item,index)" :class="active === index ? 'list-ul list-ul-active' : 'list-ul'" v-for="(item, index) in form.set.recharge_ladder" :key="index">
            <div :class="active === index ? 'top-li  bottom-li-active' : 'top-li'">
              <span class="recharge-num">{{item.comput}}</span>
              <span class="recharge-name">{{form.set && form.set.name ? form.set.name : "算力"}}</span>
            </div>
            <div :class="active === index ? 'bottom-li bottom-li-active' : 'bottom-li'">{{item.money}}元</div>
          </div>
        </div>
      </div>
      <!-- <div class="menber-discount"> -->
        <!-- <div class="menber-desc">
          <span>会员折扣价</span>
          <span>¥0.00</span>
        </div>
        <div class="menber-desc" style="margin-top: 0.9375rem;">
          <span>可用10.00消费积分1.0抵扣10.00元</span>
          <van-switch v-model="checked" />
        </div> -->
        <!-- <div class="menber-desc">
          <span style="flex: 2;text-align: left;">卖家留言</span>
          <van-field v-model="value" label="" placeholder="如需备注信息请输入" style="flex: 1.1;" class="field-v2"/>
        </div> -->
      <!-- </div> -->
      <!-- <div class="menber-discount">
        <div class="menber-desc">
          <span>订单总金额</span>
          <span>¥9990.00</span>
        </div>
      </div> -->
      <div class="menber-discount order-op" v-html="form.set ? form.set.content : ''" v-if="form.set && form.set.content"></div>
    </div>

    <div class="numberKeyboard">
      <van-number-keyboard :show="show" theme="custom" close-button-text="付款" @close="confirmPay" @delete="handkeyboarddelete" @input="handkeyboardinput" extra-key="." />
    </div>
  </div>
</template>

<script>
import cservicePop from "@/components/goods/children/plugin/cservicePopup";
export default {
  data() {
    return {
      active: "",
      show: true,
      computed_value: "",
      passValueArr: [],
      form: {},
    };
  },

  created() {},
  components: { cservicePop },

  computed: {},

  mounted() {
    if (!this.$route.query.api) {
      return this.$toast("缺少必要参数");
    }
    this.getData();
  },

  methods: {
    clickComputed(item,index) {
      // this.computed_value = "";
      // this.passValueArr = []
      if(index === this.active) {
        this.active = ""
      }else {
        this.active = index;
      }
    },
    handkeyboarddelete() {
      this.passValueArr.pop();
      this.computed_value = this.passValueArr.length == 0 ? "" : this.passValueArr.join("");
    },
    handkeyboardinput(value) {
      this.active = ""
      if (this.passValueArr.length >= this.maxlength) {
        let floatNum = this.getFloatNum();
        if (value == "." || (floatNum != -1 && floatNum < 2)) {
          // 这两个不return
        } else {
          return;
        }
      }
      if (value == ".") {
        if (this.passValueArr.length == 0) return;
        if (this.passValueArr.includes(".")) return;
      }
      let floatNum = this.getFloatNum();
      if (floatNum >= 2) return;
      this.passValueArr.push(value);
      console.log(this.form,11111)
      this.computed_value = this.passValueArr.length == 0 ? "0" : this.passValueArr.join("");
    },
    //获取当前小数点后有几位
    getFloatNum() {
      let index = this.passValueArr.indexOf(".");
      if (index >= 0) {
        index++;
        let len = this.passValueArr.length;
        index = len - index;
      }
      return index;
    },
    confirmPay() {
      if(this.active === "" && Number(this.computed_value ) < this.form.set.min_amount) {
        this.$toast(`最低充值${this.form.set ? this.form.set.min_amount : ""}${this.form.set && this.form.set.name ? this.form.set.name : "算力"}`);
        return
      }
      let multiple_recharge = Number(this.form.set.multiple_recharge) ? Number(this.form.set.multiple_recharge) : ""
      if(this.active === "" && !this.isMultiple(this.computed_value,multiple_recharge) && multiple_recharge) {
          this.$toast(`前端充值数量必须是${multiple_recharge}的倍数`);
          return
      }
      let comput_change = this.form.set ? this.form.set.comput_change : ""

      let price = this.active === "" ? this.computed_value * comput_change : this.form.set.recharge_ladder[this.active].money;
      let number = this.active === "" ? this.computed_value : this.form.set.recharge_ladder[this.active].comput;
      let json_data = {
        recharge_type: this.active === "" ? 0 : 1,
        price,
        number,
        goodsId: this.form.goods_id,
        tag: "computing_power",
      };
        this.$router.push(
        this.fun.getUrl("goodsorder", {}, {...json_data})
      );
      console.log('confirmPay',111,json_data);
    },
    isMultiple(number, x) {
      return number % x === 0;
    },
    async getData() {
      let data = await $http.post(this.$route.query.api, { });
      console.log(data,'datadata');
      if (data.result) {
        this.form = data.data;
        this.fun.setWXTitle(`${this.form.set && this.form.set.name ? this.form.set.name : '算力'}充值`)
      } else {
        this.$toast(data.msg);
      }
    },
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.computed-recharge {
  padding-bottom: 16rem;
}
.top-backgroud {
  height: 11.125rem;
  background: linear-gradient(var(--themeBaseColor), #f5f5f5);
}
.content-box {
  margin: 0 0.75rem;
  .content-recharge {
    margin-top: -10.2rem;
    padding: 1.125rem 0.8125rem 0.6875rem 0.8125rem;
    background: white;
    border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
    .content-title {
      font-weight: 400;
      font-size: 0.875rem;
      color: #00001c;
      text-align: left;
    }
    .content-num {
      font-weight: bold;
      font-size: 1.4375rem;
      color: #00001c;
      text-align: left;
    }
    .recharge-row {
      border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
      border: 0.03125rem solid #d6d6dc;
      margin: 0.9375rem 0 0.625rem 0;

      height: 3rem;
      padding-left: 0.75rem;
      display: flex;
      font-size: 0.875rem;
      line-height: 3rem;

      .recharge-tip {
        color: #AAAAB3;
      }
    }
    .content-text-color {
      font-weight: 400;
      font-size: 0.75rem;
      color: var(--themeBaseColor);
      text-align: left;
      margin-bottom: 0.3rem;
    }

    .recharge-list {
      display: flex;
      flex-wrap: nowrap;
      overflow: auto;
      margin-left: -0.1875rem;
      .list-ul {
        border-radius: 0.75rem 0.75rem 0.75rem 0.75rem;
        border: 0.03125rem solid #d6d6dc;
        padding: 0.6875rem 1.09375rem;
        margin-right: 0.59375rem;
        .top-li {
          font-weight: bold;
          font-size: 0.8125rem;
          color: #00001c;
          display: flex;
          margin-bottom: 0.40625rem;
          line-height: 1;
          white-space: nowrap;
          .recharge-num {
            font-size: 0.95rem;
          }
          .recharge-name {
            // margin: 0.2rem 0 0 0;
          }
        }
        .bottom-li {
          line-height: 1;
          font-weight: 400;
          font-size: 0.75rem;
          color: #6e6e79;
          white-space: nowrap;
        }
      }
      .bottom-li-active {
        color: var(--themeBaseColor) !important;
      }
      .list-ul-active {
        border: 0.03125rem solid var(--themeBaseColor) !important;
      }
    }
  }
  .menber-discount {
    padding: 1.15625rem 0.8125rem;
    background: white;
    margin-top: 0.625rem;
    border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
    .menber-desc {
      display: flex;
      justify-content: space-between;
      font-weight: 400;
      font-size: 0.8125rem;
      color: #00001c;
      
      align-items: center;
    }
  }
  .order-op {
    line-height: 1.25rem;
    text-align: left;
  }
}

::v-deep .van-field__label {
  width: 0;
  margin-right: 0;
}
::v-deep  .van-cell {
  background-color: transparent;
}
.field-v2 {
  padding: 10px 0;
}
</style>
